Cancel vs Close: Design to Distinguish the Difference取消與關閉

區分“取消”和“關閉”操作對避免使用者資料丟失至關重要。儲存更改後再關閉檢視、使用文字標籤代替X圖示、在破壞性操作前提供確認對話方塊，均有助於提升使用者體驗。

X圖示的多義性問題

在現代數字介面中，X圖示通常用於“取消”流程或關閉中間檢視。然而，X圖示是否代表“取消”或“關閉”往往不明確，尤其當缺少文字標籤時，X的含義可能令人困惑。這種模糊會讓使用者在誤解操作後丟失未儲存的工作，導致不便甚至沮喪。

避免使用者資料丟失（Avoid Losing Users’ Work）

當使用者點選X圖示以關閉一個視窗，卻意外地完全取消了流程並丟失了資料，體驗便會極為糟糕。X圖示常見的模糊性使得使用者無法區分操作的不同含義。在涉及計時器、音訊播放、篩選器選擇或其他未儲存的工作內容時，區分“取消”和“關閉”尤為重要。例如：

Sephora網站：使用者在選擇免費試用樣品時，點選“新增”按鈕後，雖然介面顯示可移除的連結，但當使用者點選X圖示關閉視窗而非Done連結時，商品並未被新增到購物車，使用者需重新選擇。

Sephora：儘管看起來樣品似乎已經新增到購物車中，因為現在可以將其移除，但關閉模態框（透過點選右上角的“X”）會取消選擇試用商品的過程。要將商品新增到他們的購物車中，使用者必須先點選“新增”，然後透過點選“完成”連結來應用該操作。

為了確保使用者資料不丟失，系統應確保使用者意圖明確，可以透過以下方式達成目標：

請求確認操作（Ask for Confirmation）

如果使用者在含有已完成操作的檢視中按下X圖示，系統可以透過確認對話方塊來驗證使用者意圖，尤其在可能丟失使用者資料的操作中尤為有效。例如：

Lowes移動應用：使用者在關閉篩選檢視前，系統會彈出確認對話方塊，詢問是否應用篩選條件或取消。

勞氏移動應用程式：點選 X 按鈕或“返回”箭頭可能會重置任何選擇，並將使用者帶回上一個結果集。正確：點選 X 後，會出現一個確認對話方塊，以檢查使用者在返回結果列表之前是打算應用還是取消篩選細化。

Duolingo應用：使用者在關閉未完成的課程時收到確認對話方塊，以確保不會意外丟失進度。

多鄰國：點選“X”按鈕將結束當前課程並放棄所有進度。為防止錯誤，該應用程式包含一個確認對話方塊。

確認對話方塊在明確X圖示的含義上有效，但它也增加了額外步驟，且使用者在按下X圖示前並不清楚其含義，因此可能擔心其操作後果。

使用明確的文字標籤（Use Explicit Labels）

文字標籤相比確認對話方塊更直接且清晰。使用明確的文字標籤（如“取消”、“應用”或“完成”）可以減少操作歧義，避免使用者因誤解操作丟失進度。

例如：

Yelp和Etsy移動應用：Yelp提供了“取消”、“重置”和“應用”按鈕，Etsy提供“清除”和“完成”按鈕。這些標籤直觀地表明不同操作的結果，避免了意外關閉或誤解操作。

（左）Yelp 移動應用程式：“取消”“重置”和“應用”的文字標籤直接且清晰，使使用者不太可能無意中關閉檢視並丟失他們的篩選選擇。（右）Etsy 移動應用程式：文字標籤“清除”為使用者提供了一種明確的方式（請原諒這個雙關語）來取消他們的選擇。“完成”連結返回到產品列表頁面，所選內容已應用。

優先使用關閉和儲存選項（Favor Close & Save）

在空間有限或必須使用X圖示時，優先設定關閉並儲存進度。透過X圖示儲存中間進度並關閉視窗，同時提供取消按鈕可幫助使用者退出流程，同時避免歧義。

例如：

Gmail：在郵件撰寫視窗中，X圖示用於關閉視窗並自動儲存草稿，防止使用者進度丟失。滑鼠懸停在X圖示上顯示的工具提示確認操作僅為“儲存並關閉”。

Gmail：滑鼠懸停顯示，X 圖示是用於關閉視窗而不是刪除草稿，允許使用者“儲存並關閉”訊息視窗，而不會丟失正在進行的工作。

Glow Baby應用：使用者在執行計時器時可透過X圖示關閉計時器檢視，計時器繼續在後臺執行；若計時器暫停，X圖示則會彈出“放棄”或“取消”選項，以確保使用者操作準確。

（左）點選"X"關閉執行中的計時器檢視不會停止計時，使用者可繼續使用其他功能。（中）頂部橫幅顯示計時器狀態。（右）暫停計時器時點選"X"，彈出"丟棄"或"取消"選項確認使用者意圖。

預設儲存是長流程或後臺任務的有效解決方案，避免了使用者誤操作丟失進度，但如果使用者本意是取消選擇而點選了X圖示，則自動儲存會讓人困惑。因此，提供獨立的“取消”按鈕以供選擇至關重要。

X圖示的模糊含義可能會導致可用性問題，但預計它不會很快從介面中消失。設計者需意識到X圖示的多種含義，在設計中明確“關閉”和“取消”的區別，並透過確認對話方塊或自動儲存來避免使用者資料丟失。